<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{APP_NAME}</title>
    <link rel="icon" type="image/svg+xml" href="assets/logo.svg" />
    <script src="assets/promise.polyfill.js"></script>
    <link rel="stylesheet" href="assets/styles.css" />
    <script>
      window.$appName = "{APP_NAME}";
    </script>
    <script src="assets/jquery-3.6.1.js"></script>
  </head>
  <body>
    <div class="header">
      <h1>{APP_NAME}</h1>
      <div id="toolbar">
        <div id="searchBar">
          <input
            type="text"
            placeholder="搜索文件..."
            id="query"
            title="查询示例: filename，filename.pdf"
          />
          <button id="btn-search" onclick="searchFiles()">搜索</button>
        </div>
        <div id="uploadForm">
          <button id="btn-open-upload-dialog">上传</button>
        </div>
      </div>
    </div>

    <div id="upload-dialog">
      <div class="upload-content">
        <div class="upload-title">上传文件</div>
        <div class="upload-form">
          <!-- 添加单选框组，让用户选择上传方式 -->
          <input
            type="radio"
            id="localUpload"
            name="uploadMethod"
            value="local"
            checked
          />
          <label for="localUpload">上传本地文件</label>
          <input type="radio" id="urlUpload" name="uploadMethod" value="url" />
          <label for="urlUpload">从 URL 上传</label>

          <!-- 上传本地文件部分 -->
          <div id="upload-local">
            <label for="localFileUpload">选择文件: </label>
            <input type="file" name="localFile" id="localFileUpload" />
          </div>
          <!-- 填写 URL 上传部分 -->
          <div id="upload-url">
            <label for="uploadUrl">文件的 URL: </label>
            <input
              type="text"
              id="uploadUrl"
              placeholder="输入文件的 URL"
              maxlength="1024"
            />
            <div id="fileInfo">
              <div>
                <label for="realUrl">下载地址: </label>
                <textarea id="realUrl" readonly></textarea>
              </div>
              <div>
                <label for="newFilename">存储文件名: </label>
                <input type="text" id="newFilename" />
              </div>
              <div>
                <label for="newFilename">文件大小: </label>
                <span id="filesize"></span>
              </div>
            </div>
          </div>

          <!-- 添加指定目录输入框 -->
          <div class="upload-form-item">
            <label for="uploadDir">指定上传目录: </label>
            <input type="text" id="uploadDir" placeholder="请输入相对目录" />
            <div class="tip">
              可以自定义上传目录，如： xxx/test， xxx 是根目录
            </div>
          </div>

          <!-- 弹框底部，分为左右两部分 -->
          <div class="upload-footer">
            <div class="upload-message" id="uploadMessage"></div>
            <div class="upload-buttons">
              <button id="btn-upload-ok">上传</button>
              <button id="btn-upload-cancel">关闭</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div id="nav">
      <div id="breadcrumb"></div>
    </div>
    <div id="fileList"></div>

    <div id="preview-dialog" tabindex="0">
      <div class="preview-overlay">
        <div class="preview-header">
          <span class="preview-header--prefix">预览</span>
          <span id="preview-filename"></span>
          <span id="btn-preview-fullscreen">全屏</span>
        </div>
        <div id="preview-container"></div>
        <div class="preview-footer">
          <a id="btn-preview-download">
            <button>下载</button>
          </a>
          <button id="btn-preview-close">关闭</button>
        </div>
      </div>
    </div>

    <footer id="app-footer">
      <div id="message-bar"></div>
      <div class="footer-content">
        <a href="https://gitee.com/hyjiacan/lightshare" target="_blank"
          >轻共享</a
        >
        <span>•</span>
        <a
          href="https://gitee.com/hyjiacan/lightshare/issues/new"
          target="_blank"
          >反馈建议</a
        >
        <span>•</span>
        <span>hyjiacan © 2025</span>
      </div>
    </footer>
    <script src="assets/script.js"></script>
    <script src="assets/upload.js" defer="defer"></script>
  </body>
</html>
